import React, { useState } from "react";
import { Tabs, Spin } from "antd";
import { text_check } from "../../utils";
import * as modules from "../../components/index.d";

export default function MenuTabs(props) {
  const {
    tab_idx,
    tab_array,
    router_go_func,
    tab_remove,
    user_power,
    user_power_lang,
    user_msg,
  } = props;

  // tab标签点击
  const tab_click = (key) => {
    router_go_func(key);
  };

  const [spinning, setSpinning] = useState(false);
  return (
    <>
      <div className="Tabs">
        <Tabs
          activeKey={tab_idx}
          onTabClick={tab_click}
          type="editable-card"
          hideAdd={true}
          onEdit={tab_remove}
          items={tab_array.map((item, i) => {
            if (!modules["default"][item.method]) {
              return {
                label: text_check(item),
                key: item.method,
                closable: item.closable,
                children: <div>开发中...</div>,
              };
            }
            const Component = modules["default"][item.method];
            return {
              label: text_check(item),
              key: item.method,
              closable: item.closable,
              children: (
                <Component
                  actions={{
                    menu_action: [
                      ...(user_power[item.method]
                        ? user_power[item.method]
                        : []),
                    ],
                    user_power_lang: JSON.stringify(user_power_lang),
                    username: user_msg.username,
                    user_grade: user_msg.role_grade,
                  }}
                  setSpinning={setSpinning}
                />
              ),
            };
          })}
        />
      </div>

      <Spin spinning={spinning} fullscreen style={{ zIndex: 1001 }} />
    </>
  );
}
